<script setup lang="ts">
import { onMounted, ref } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";

import service from "@/api/index";
var xs = ref();
var arr = ref([])

var tableData:any = ref([]);
var check = (select, row) => {
  console.log(select, row);
};
var checkAll = (a) => {
  console.log(a);
};

var tableData0:any = ref([]);
var tableData1:any = ref([]);
var tableData2:any = ref([]);

onMounted(async () => {
  var res = await service.wnnAdmin.role();
  console.log(res);
});

var tableData3:any = ref([]);

var del = () => {
  console.log(1);
};
var add = async () => {
  console.log(2);
  xs.value = !xs.value;

};
//查询
var input1:any = ref("");
var input2:any = ref("");
var select:any = ref("");
var find = () => {
  tableData3.value = tableData.value;
  tableData.value = tableData.value.filter(
    (item:any) =>
      item.name == input1.value &&
      item.address == input2.value &&
      item.status == select.value
  );
};

var reverse = () => {
  tableData.value = tableData3.value;
};

//设备列表
var getdata = () => {
  console.log(1);
  tableData.value = tableData0.value;
};
//告警记录
var warndata = () => {
  console.log(2);
  tableData.value = tableData1.value;
};
//运维记录
var movedata = () => {
  console.log(tableData.value);
  console.log(3);
  tableData.value = tableData2.value;
  console.log(tableData.value);
};


var baocun = (e) => {
  if (e.target.className == "el-button el-button--primary cha") {
    xs.value = !xs.value;
  }
};
</script>
<template>
  <div class="tenement_sixth">
    <Header title="角色信息管理" @del="del" @add="add" />
    <div class="main" v-show="!xs">
      <div class="nav">
        <div class="kuang">
          <el-form class="form">
            <div class="left">
              <span>角色名称：</span>
              <el-input placeholder="请输入角色名称" v-model="input1" />
            </div>
            <div class="btns">
              <el-button type="success" class="chaxun" @click="find">查询</el-button>
              <el-button type="info" plain @click="reverse">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <Table :data="tableData" @check="check" @check-all="checkAll" :keys="[
          'flex',
          'createAdmin',
          'createTime',
          'roleId',
          'roleName',
          'roleType',
          'status',
          'updateAdmin',
          'updateTime'
        ]" :label="[
  '值',
  '角色名称',
  '角色类型',
  '启用状态',
  '创建角色人(账号)',
  '创建时间',
  '更新操作人',
  '更新时间',
]" :status="['status']">
          <template #status> 正常 </template>
          <template #btn>
            <button>详细</button>
            <button>删除</button>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.tenement_sixth {
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background: #fff;
    align-items: center;
    padding: 0 10px;
    padding-right: 20px;
    margin-bottom: 10px;

    h3 {
      display: flex;
      height: 100%;
      margin-left: 30px;
      font-weight: 600;

      span {
        width: 8px;
        flex: 1;
        background: rgb(94, 128, 234);
        margin-right: 15px;
      }
    }

    .right {
      .add {
        margin-right: 20px;
      }
    }
  }

  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 20px;

    .nav {
      height: 200px;
      display: flex;
      flex-direction: column;

      .tab {
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;

        span {
          height: 100%;
          padding: 0 30px;
          font-size: 14px;
        }

        span:hover {
          color: green;
          border-bottom: 1px solid green;
        }
      }

      .kuang {
        flex: 1;
        padding: 30px 0;

        .form {
          border: 1px solid #999;
          border-radius: 8px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          >div {
            display: flex;
            flex: 2;
            margin: 0 20px;
            align-items: center;

            span {
              white-space: nowrap;
              font-size: 14px;
            }
          }

          .btns {
            flex: 1;
            display: flex;
            justify-content: right;

            .chaxun {
              margin-right: 30px;
            }
          }
        }
      }
    }

    .tableBox {
      flex: 1;

      .table {
        text-align: left;

        :deep(td),
        :deep(th) {
          font-weight: 400;
          border: 1px solid #eee;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>

